<template>
  <div>
    <!-- 英雄区域 -->
    <section
      class="py-16 md:py-24 bg-gradient-to-r from-primary-50 via-white to-secondary-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
      <div class="container max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div class="max-w-2xl">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 animate-slide-up">
              职场避雷宝典
              <span
                class="text-primary-600 dark:text-primary-400 inline-block transform hover:scale-105 transition-transform duration-300">特不靠谱</span>
            </h1>
            <p class="text-lg md:text-xl mb-8 text-gray-700 dark:text-gray-300 animate-slide-up"
              style="animation-delay: 100ms;">
              这里收录各地不靠谱公司和职场搅屎棍的详尽档案，帮你规避职场陷阱，找到理想工作环境
            </p>
            <div class="flex flex-wrap gap-4 animate-slide-up" style="animation-delay: 200ms;">
              <NuxtLink to="/companies" class="transform hover:translate-y-[-2px] transition-transform">
                <Button variant="default">查看不靠谱公司</Button>
              </NuxtLink>
              <NuxtLink to="/troublemakers" class="transform hover:translate-y-[-2px] transition-transform">
                <Button variant="outline">职场搅屎棍排行</Button>
              </NuxtLink>
            </div>
          </div>
          <div class="hidden lg:block relative">
            <div class="relative h-[450px] w-full rounded-lg overflow-hidden">
              <div class="absolute inset-0 bg-white dark:bg-gray-800 shadow-xl rounded-lg animate-float">
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                  <div class="relative">
                    <!-- 文档图标 -->
                    <div
                      class="w-64 h-80 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center justify-center">
                      <div class="w-3/4 h-3/4 flex flex-col space-y-4">
                        <div class="w-full h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
                        <div class="w-2/3 h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
                        <div class="w-5/6 h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
                        <div class="w-full h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
                      </div>
                    </div>
                    <!-- 警告图标 -->
                    <div
                      class="absolute -bottom-5 -right-5 w-20 h-20 bg-primary-500 rounded-full flex items-center justify-center shadow-lg animate-pulse">
                      <span class="text-3xl text-white">⚠️</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 装饰元素 -->
            <div
              class="absolute -top-4 -right-4 w-20 h-20 bg-secondary-200 dark:bg-secondary-900 rounded-full opacity-50 animate-float"
              style="animation-delay: 300ms;"></div>
            <div
              class="absolute -bottom-4 -left-4 w-16 h-16 bg-primary-200 dark:bg-primary-900 rounded-full opacity-50 animate-float"
              style="animation-delay: 500ms;"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新不靠谱公司 -->
    <section class="py-16 bg-white dark:bg-gray-950">
      <div class="container max-w-7xl mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto mb-12">
          <h2 class="text-3xl font-bold tracking-tight mb-4">最新不靠谱公司</h2>
          <p class="text-gray-600 dark:text-gray-400">
            这些公司最近因为各种"不靠谱"行为被我们收录，建议求职者谨慎对待
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(company, index) in latestCompanies" :key="company.id"
            class="animate-in fade-in duration-500 transform hover:-translate-y-1 transition-all"
            :style="`animation-delay: ${index * 100}ms`">
            <Card>
              <CardHeader>
                <div class="flex items-center justify-between">
                  <CardTitle>{{ company.name }}</CardTitle>
                  <Badge :variant="getTagVariant(company.tag)">
                    {{ company.tag }}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  {{ company.location }}
                </div>
                <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
                  {{ company.description }}
                </p>
                <NuxtLink :to="`/companies/${company.id}`"
                  class="text-primary-600 dark:text-primary-400 hover:underline text-sm font-medium flex items-center group">
                  查看详情
                  <svg xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </NuxtLink>
              </CardContent>
            </Card>
          </div>
        </div>

        <div class="mt-12 text-center">
          <NuxtLink to="/companies" class="transform hover:translate-y-[-2px] transition-transform">
            <Button variant="outline">查看更多不靠谱公司</Button>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- 职场搅屎棍排行榜 -->
    <section class="py-16 bg-gray-50 dark:bg-gray-900">
      <div class="container max-w-7xl mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto mb-12">
          <h2 class="text-3xl font-bold tracking-tight mb-4">职场搅屎棍排行榜</h2>
          <p class="text-gray-600 dark:text-gray-400">
            这些人因为在职场中的"特殊表现"而榜上有名，小心避开这些职场地雷
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <div v-for="(troublemaker, index) in topTroublemakers" :key="troublemaker.id"
            class="animate-in fade-in duration-500 transform hover:-translate-y-1 transition-all">
            <Card>
              <CardContent class="p-6">
                <div class="flex">
                  <div class="flex-shrink-0 mr-6">
                    <div
                      class="w-16 h-16 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center text-2xl font-bold text-primary-600 dark:text-primary-400 animate-pulse">
                      #{{ index + 1 }}
                    </div>
                  </div>
                  <div class="flex-1">
                    <CardTitle class="mb-2">{{ troublemaker.name }}</CardTitle>
                    <div class="flex flex-wrap gap-2 mb-3">
                      <Badge v-for="skill in troublemaker.skills" :key="skill" variant="secondary">
                        {{ skill }}
                      </Badge>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
                      {{ troublemaker.description }}
                    </p>
                    <NuxtLink :to="`/troublemakers/${troublemaker.id}`"
                      class="text-primary-600 dark:text-primary-400 hover:underline text-sm font-medium flex items-center group">
                      查看详情
                      <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </NuxtLink>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        <div class="mt-12 text-center">
          <NuxtLink to="/troublemakers" class="transform hover:translate-y-[-2px] transition-transform">
            <Button variant="outline">查看完整排行榜</Button>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- CTA区域 -->
    <section class="py-16 bg-white dark:bg-gray-950 relative overflow-hidden">
      <div class="container max-w-7xl mx-auto px-4 relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-3xl font-bold tracking-tight mb-6">加入我们，共创更美好的职场环境</h2>
          <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
            如果你也遭遇过不靠谱公司或职场搅屎棍，欢迎分享你的经历，帮助更多人避开这些陷阱
          </p>
          <a href="mailto:klau.lover@gmail.com" class="transform hover:scale-105 transition-transform">
            <Button variant="default">提交线索</Button>
          </a>
        </div>
      </div>
      <!-- 背景装饰 -->
      <div
        class="absolute top-0 right-0 w-40 h-40 bg-primary-100 dark:bg-primary-900 rounded-full opacity-30 -translate-y-1/2 translate-x-1/4">
      </div>
      <div
        class="absolute bottom-0 left-0 w-60 h-60 bg-secondary-100 dark:bg-secondary-900 rounded-full opacity-30 translate-y-1/3 -translate-x-1/3">
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

// 模拟数据
const latestCompanies = [
  {
    id: '1',
    name: '薪水拖欠集团',
    tag: '薪资问题',
    location: '北京市朝阳区',
    description: '该公司以各种理由拖欠员工薪水，平均拖欠时间达到3个月，员工投诉无门，离职后薪资更是一分不发。'
  },
  {
    id: '2',
    name: '996福报科技',
    tag: '加班文化',
    location: '上海市浦东新区',
    description: '该公司实行严格的996工作制，甚至经常性007，却不支付任何加班费。管理层经常强调"加班是福报"，拒绝加班者会被穿小鞋。'
  },
  {
    id: '3',
    name: '画饼许愿有限公司',
    tag: '虚假承诺',
    location: '广州市天河区',
    description: '入职前承诺的各种福利待遇统统落空，股权激励、年终奖、调薪承诺全是画饼。员工离职率高达85%，却依然无动于衷。'
  },
  {
    id: '4',
    name: '甩锅专业户集团',
    tag: '内部管理',
    location: '深圳市南山区',
    description: '公司内部管理混乱，出了问题全部甩锅给基层员工。高管们擅长互相推诿责任，导致项目经常延期，客户投诉不断。'
  },
  {
    id: '5',
    name: '监控至上数字科技',
    tag: '隐私侵犯',
    location: '杭州市西湖区',
    description: '公司在办公区域安装大量监控，甚至在茶水间和休息区也不例外。要求员工安装特殊软件监控工作电脑和手机使用情况。'
  },
  {
    id: '6',
    name: '变相裁员创新企业',
    tag: '裁员风波',
    location: '成都市高新区',
    description: '为了避免支付补偿金，该公司采取各种手段逼迫员工主动离职，包括无故调岗、降薪、孤立员工等非人性化做法。'
  }
];

const topTroublemakers = [
  {
    id: '1',
    name: '变脸禽经理',
    skills: ['职场PUA', '画饼', '窃取功劳'],
    description: '该经理在员工面前永远一副和蔼可亲的面孔，但在上级面前会把所有功劳归于自己，所有错误推给团队成员。擅长通过贬低员工自信心来控制团队。'
  },
  {
    id: '2',
    name: '办公室政治家',
    skills: ['散播谣言', '制造矛盾', '背后攻击'],
    description: '这位"政治家"擅长在同事之间制造矛盾，通过散播谣言和半真半假的信息来破坏团队关系，最终达到自己上位的目的。'
  },
  {
    id: '3',
    name: '甩锅艺术家',
    skills: ['责任推卸', '表面工作', '危机公关'],
    description: '无论什么项目出了问题，总能找到完美的理由将责任推给他人。同时，擅长在上级面前表现得非常努力，实际上几乎不做实质性工作。'
  },
  {
    id: '4',
    name: '信息垄断者',
    skills: ['信息控制', '权力寻租', '排挤新人'],
    description: '通过垄断关键信息和资源，使得团队其他成员必须依赖自己。对新人采取不教、乱教或者错教的方式，防止自己的"地位"被撼动。'
  }
];

// 根据标签返回对应的样式类
const getTagClass = (tag: string) => {
  const tagMap: Record<string, string> = {
    '薪资问题': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
    '加班文化': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
    '虚假承诺': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
    '内部管理': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
    '隐私侵犯': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
    '裁员风波': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
  };

  return tagMap[tag] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
};

// 根据标签返回对应的variant
const getTagVariant = (tag: string) => {
  const variantMap: Record<string, "default" | "destructive" | "outline" | "secondary"> = {
    '薪资问题': 'destructive',
    '加班文化': 'secondary',
    '虚假承诺': 'secondary',
    '内部管理': 'default',
    '隐私侵犯': 'secondary',
    '裁员风波': 'outline',
  };

  return variantMap[tag] || 'default';
};
</script>

<style scoped>
.animate-slide-up {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.8s forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
</style>